<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/resource/common/taglib.jspf"%>
<html lang="en" class="app js no-touch no-android chrome no-firefox no-iemobile no-ie no-ie10 no-ie11 no-ios no-ios7 ipad">
<head>
<meta name="decorator" content="default" />
<%@include file="/resource/common/jquery.jspf"%>
<%@include file="/resource/common/commonCss.jspf"%>
<%@include file="/resource/common/bootstrap.jspf"%>
<%@include file="/resource/common/showLoading.jspf"%>
<%@include file="/resource/common/tips.jspf"%>
<script src="${ctx }/resource/plugins/echarts/echarts-all.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctx }/resource/js/ajax/chart_monitorSystemInfo.js"></script>

<script type="text/javascript">
	function modifySer(key) {
		$("body").showLoading();
		$.post("${ctx }/modifySetting.do?" + key + "=" + $("#" + key).val(), {
			async : false,
			id : $("#id").val(),
			dataType : "json",
		}, function(data) {
			if (data != null) {
				if (data.ret == 1) {
					Tips(4000, // 提示层显示的时间
					"保存成功", // 显示的消息
					300, // 滑动速度
					"success");
				} else {
					Tips(4000, // 提示层显示的时间
					"保存失败-->" + data.msg, // 显示的消息
					300, // 滑动速度
					"error");
				}
			}
			$("body").hideLoading();
		});
	}
	
</script>
</head>
<body class="" style="">
	<div class="wrapper wrapper-content">
		<div class="content-box-header">
			<h3 class="panel-title">系统监控</h3>
			<div class="clear"></div>
		</div>
		<div class="content-box-content">
			<div class="row animated fadeInRight">
				<div class="col-sm-12">
					<div class="panel panel-primary">
						<div class="panel-heading">
							<i class="fa fa-rss-square"></i> 实时监控
						</div>
						<div class="panel-body">
							<table style="width: 100%;">
								<tr>
									<td width="33.3%"><div id="main_one" style="height: 240px;"></div></td>
									<td width="33.3%"><div id="main_two" style="height: 240px;"></div></td>
									<td width="33.3%"><div id="main_three" style="height: 240px;"></div></td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div class="row animated fadeInRight">
				<div class="col-sm-12">
					<div class="panel panel-success">
						<div class="panel-heading">
							<i class="fa fa-briefcase"></i> 警告设置
						</div>
						<table class="table table-striped table-bordered table-hover" width="100%" style="vertical-align: middle;">
							<thead>
								<tr style="background-color: #faebcc; text-align: center;">
									<td width="155">名称</td>
									<td width="90">参数</td>
									<td width="270">预警设置</td>
									<td width="255">邮箱设置</td>
								</tr>
							</thead>
							<tbody id="tbody">
								<tr>
									<td style='padding-left: 3px; text-align: left; vertical-align: middle;' id="cpu_name">CPU</td>
									<td style='padding-left: 3px; text-align: left; vertical-align: middle;'>当前使用率：<span id="td_cpuUsage" style="color: red;">10</span> % </td>
									<td align="center">
										<table>
											<tr>
												<td>
													<form class="form-inline">
												  		<div class="form-group">
												    		<div class="input-group">
												    			<div class="input-group-addon" style="padding-left: 3px">使用率超出</div>
												      			<input class='form-control' name='cpu' style="width: 60px" id='cpu' type='text' value='${sysMonitor.cpu}' placeholder="cpu" />
												      			<input class='inputclass' name='id' id='id' type="hidden" value='${sysMonitor.id}' />
												      			<div class="input-group-addon">%</div>
												    		</div>
												  		</div>
												  		发送邮箱提示<button type="button" class="btn btn-info" onclick='modifySer("cpu");'>修改</button>
													</form>
												</td>
											</tr>
										</table>
									</td>
									<td rowspan='3' align="center" style="vertical-align: middle;">
										<form class="form-inline">
										  <div class="form-group">
										    <div class="input-group">
										      <div class="input-group-addon">email</div>
										      <input type="text" class="form-control" style="width: 150px;" id="toEmail" name='toEmail' placeholder="toEmail" value='${sysMonitor.toEmail}'>
										      <div class="input-group-addon">@</div>
										    </div>
										  </div>
										  <button type="button" class="btn btn-info"  onclick='modifySer("toEmail");'>修改</button>
										</form>
									</td>
								</tr>
								<tr>
									<td style='padding-left: 3px; text-align: left; vertical-align: middle;' id="ram_name">服务器内存</td>
									<td style='padding-left: 3px; text-align: left; vertical-align: middle;'>当前使用率：<span id="td_serverUsage" style="color: blue;">10</span> %
									</td>
									<td align="center">
										<table>
											<tr>
												<td>
													<form class="form-inline">
												  		<div class="form-group">
												    		<div class="input-group">
												    			<div class="input-group-addon" style="padding-left: 3px">使用率超出</div>
												      			<input class='form-control' name='ram' style="width: 60px" id='ram' type='text' value='${sysMonitor.ram}' placeholder="服务器内存"/>
												      			<div class="input-group-addon">%</div>
												    		</div>
												  		</div>
												  		发送邮箱提示<button type="button" class="btn btn-info" onclick='modifySer("ram");'>修改</button>
													</form>
												</td>
											</tr>
										</table>
	
									</td>
								</tr>
								<tr>
									<td style='padding-left: 3px; text-align: left; vertical-align: middle;' id="jvm_name">JVM内存</td>
									<td style='padding-left: 3px; text-align: left; vertical-align: middle;'>当前使用率：<span id="td_jvmUsage" style="color: green;">10</span> %
									</td>
									<td align="center">
										<table>
											<tr>
												<td>
													<form class="form-inline">
												  		<div class="form-group">
												    		<div class="input-group">
												    			<div class="input-group-addon" style="padding-left: 3px">使用率超出</div>
												      			<input class='form-control' name='jvm' style="width: 60px" id='jvm' type='text' value='${sysMonitor.jvm}' placeholder="JVM内存"/>
												      			<div class="input-group-addon">%</div>
												    		</div>
												  		</div>
												  		发送邮箱提示<button type="button" class="btn btn-info" onclick='modifySer("jvm");'>修改</button>
													</form>
												</td>
											</tr>
										</table>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="row animated fadeInRight">
				<div class="col-sm-6">
					<div class="panel panel-info">
						<div class="panel-heading">
							<i class="fa fa-th-list"></i> 服务器信息
						</div>
						<div class="panel-body" style="padding: 0px">
							<div style="height: 480px;" class="embed-responsive embed-responsive-16by9">
								<iframe class="embed-responsive-item" src="${ctx}/systemInfo.do"></iframe>
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="panel panel-danger">
						<div class="panel-heading">
							<i class="fa fa-fire"></i> 实时监控
						</div>
	
						<div class="panel-body">
							<div id="main" style="height: 450px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
